<template>
  <div class="container">
    <div class="join-success tac" v-if="joinSuccess">
      您已经成功加入团队！<br />
      请使用 <span>PC端</span> 体验 <span>智能配方系统</span> 的产品功能
      <a-button class="submit-btn mt40" type="primary" @click="copyLink"
        >复制登录链接（PC端打开）</a-button
      >
    </div>
    <template v-else>
      <div class="invite-title tac">{{ inviteInfo.phone }}邀请你加入团队：</div>
      <div class="team-name tac mb36">{{ inviteInfo.teamName }}</div>
      <a-form
        v-if="!isLogin && !customerId"
        class="form"
        :model="formState"
        name="basic"
        :label-col="{ span: 0 }"
        :wrapper-col="{ span: 24 }"
        autocomplete="off"
        @finish="getIsChecked"
      >
        <a-form-item name="phone" :rules="[{ validator: phoneValidate, trigger: ['blur'] }]">
          <a-input v-model:value="formState.phone" placeholder="手机号" class="default-height">
            <template #prefix>
              <img src="@\assets\xxxhdpi\name-icon.png" width="16" height="16" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码' }]">
          <a-input v-model:value="formState.code" placeholder="验证码" class="default-height">
            <template #prefix>
              <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
            </template>
            <template #suffix>
              <a-button
                class="getCode"
                :disabled="codeState.codeDisabled"
                :class="{ getCodeDisable: codeState.codeDisabled }"
                @click="getCode"
                >{{ codeState.codeDisabled ? codeState.time + 'S' : '发送验证码' }}</a-button
              >
            </template>
          </a-input>
        </a-form-item>

        <a-form-item class="login-btn">
          <a-button class="submit-btn" type="primary" html-type="submit">立即登录</a-button>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="isAgree"
            >我已阅读并同意
            <span class="blue" @click="openAgreement(AGREEMENT_TYPE.用户协议)">《用户协议》</span
            >与<span class="blue" @click="openAgreement(AGREEMENT_TYPE.隐私政策)"
              >《隐私政策》</span
            ></a-checkbox
          >
        </a-form-item>
        <Agreement
          :key="agreementType"
          v-model:visible="agreementVisible"
          :agreementType="agreementType"
        />
      </a-form>
      <div v-else>
        <a-button class="submit-btn" type="primary" @click="JoinTeam" style="margin-top: 56px"
          >加入团队</a-button
        >
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useInvite } from '@/hook/useInvite'
import { ref } from 'vue'
import { message as msgHelper } from 'ant-design-vue'
import { useClipboard } from '@vueuse/core'
import { AGREEMENT_TYPE } from '@/const'
const joinSuccess = ref(false)
const { copy } = useClipboard()
const copyLink = () => {
  // copy(`${import.meta.env.VITE_FRONTEND_DOMAIN}`)
  copy(`${location.host}`)
  msgHelper.success('复制成功')
}

const {
  formState,
  codeState,
  phoneValidate,
  getCode,
  getIsChecked,
  JoinTeam,
  isLogin,
  customerId,
  inviteInfo,
  isAgree,
  openAgreement,
  agreementType,
  agreementVisible
} = useInvite({ callback: () => (joinSuccess.value = true) })
</script>

<style lang="scss" scoped>
.container {
  padding: 10vh 19px 0;
  background-color: #fff;
  min-height: 100vh;
  .join-success {
    font-size: 15px;
    color: #292929;
    span {
      color: #3875f6;
    }
  }
}
.invite-title {
  font-size: 15px;
  color: #292929;
}
.team-name {
  font-size: 18px;
  font-weight: bold;
  color: #292929;
}
.default-height {
  height: 43px;
}
.getCode {
  // position: absolute;
  // right: 0;
  // top: 0;
  color: #3c7bff;
  border: unset;
  background-color: #f5f5f5;
  height: 40px;
}
.getCodeDisable {
  color: #646464;
}
:deep() {
  .ant-input-affix-wrapper {
    border-radius: 213px;
    background: #f5f5f5;
    .ant-input {
      background-color: #f5f5f5;
    }
  }
  .submit-btn {
    width: 100%;
    height: 43px;
    border-radius: 213px;
    background-color: #3875f6;
    font-size: 15px;
    font-weight: bold;
  }
  .ant-checkbox-inner {
    border-radius: 50%;
  }
}
button[ant-click-animating-without-extra-node]:after {
  border: 0 none;
  opacity: 0;
  animation: none 0 ease 0 1 normal;
  outline: none;
  & {
    outline: 0;
  }
}
.blue {
  cursor: pointer;
  color: #3875f6;
}
.login-btn {
  margin-bottom: 8px;
}
</style>
